<template>
    <div class="app-container">
        <table-header-component v-on:create="create" v-on:getList="getList">
            <el-input v-model="searchForm.environments_title" placeholder="请输入标题" style="width: 200px;"></el-input>
            <el-select v-model="searchForm.status" placeholder="请选择状态">
                <el-option label="全部" value=""></el-option>
                <el-option v-for="item in options.status" :key="item.value" :label="item.text" :value="item.value"></el-option>
            </el-select>
        </table-header-component>
        <el-table
                :data="tableData"
                style="width: 100%">
            <el-table-column type="expand">
                <template slot-scope="props">
                    <el-form label-position="left" inline class="demo-table-expand">
                        <el-form-item label="图片" v-if="props.row.environments_image">
                            <!--<el-tag>{{ props.row.tags }}</el-tag>-->
                            <img :src="'http://orrs4ojbz.bkt.clouddn.com/'+ props.row.environments_image" class="avatar">
                        </el-form-item>
                    </el-form>
                </template>
            </el-table-column>

            <el-table-column
                    label="环境地点"
                    prop="environments_title">
            </el-table-column>
            <el-table-column
                    label="排序"
                    prop="order">
            </el-table-column>
            <el-table-column
                    label="创建时间"
                    prop="created_at"
                    :show-overflow-tooltip="true">
            </el-table-column>
            <el-table-column
                    label="操作">
                <template slot-scope="scope">
                    <el-button size="small" @click="trashed(scope.row.id)" type="danger">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <pagination-component ref="pagination" v-on:getList="getList"></pagination-component>

        <!--添加弹框-->
        <el-dialog :title="formTitle" :visible.sync="formVisible" :close-on-click-modal="false" :close-on-press-escape="false">
            <el-form class="small-space" :model="form" :rules="rules" ref="form" label-position="left" label-width="100px">
                <input type="hidden" v-model="form.id">
                <el-form-item label="环境图片" prop="face_image">
                    <el-upload
                            class="avatar-uploader"
                            :action="importFileUrl"
                            :show-file-list="false"
                            :on-success="handleAvatarSuccess"
                            :on-error="handleError"
                            :before-upload="beforeAvatarUpload"
                            :data="upLoadData"
                            :on-change="handleChange">
                        <img v-if="imageUrl" :src="imageUrl" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        <div class="el-upload__text">建议尺寸705*410</div>
                    </el-upload>
                </el-form-item>
                <el-form-item label="环境站点名字" prop="doctor_name">
                    <el-input v-model="form.environments_title" placeholder="请输入环境站点名字"></el-input>
                </el-form-item>
                <el-form-item label="排序" prop="order">
                    <el-input v-model="form.order" placeholder="请输入排序"></el-input>
                </el-form-item>
            </el-form>
            <dialog-footer-component v-on:submit="submit(formName = 'form')" v-on:close="close"></dialog-footer-component>
        </el-dialog>


    </div>
</template>
<script>
    import PaginationComponent from '../../common/pagination-component.vue';
    import TableHeaderComponent from '../../common/table-header-component.vue';
    import DialogFooterComponent from '../../common/dialog-footer-component.vue';

    export default {
        components: {
            'pagination-component': PaginationComponent,
            'table-header-component': TableHeaderComponent,
            'dialog-footer-component': DialogFooterComponent,

        },
        data() {
            return {
                importFileUrl: 'http://upload-z2.qiniup.com',
                formTitle: '',
                imageUrl: '',
                formVisible:false,
                branchVisible:false,
                tableData: [],
                options: {
                    categories: [],
                    recommends: [],
                    status: []
                },
                searchForm: {
                    title: '',
                    environments_title:'',
                },
                form:{
                    id: '',
                    title: '',
                    environments_title:'',
                    environments_image:'',
                    order:'',
                },
                upLoadData: {
                    token: '',
                },
            }
        },
        mounted() {
            this.getList();
        },
        methods: {
            getList() {
                let _this = this;
                let search = {
                    'environments_title': _this.searchForm.environments_title,
                };
                let paramsData = { 'data': { 'search': search } };
                axios.get('/backend/environment?page=' + _this.$refs.pagination.pageData.current_page, { params: paramsData }).then(response => {
                    let { status, data, message } = response.data;
                    _this.tableData = data.lists.data;
                    _this.$refs.pagination.pageData.per_page = parseInt(data.lists.per_page);
                    _this.$refs.pagination.pageData.current_page = parseInt(data.lists.current_page);
                    _this.$refs.pagination.pageData.total = parseInt(data.lists.total);
                })
            },
            create() {
                let _this = this;
                _this.formTitle = '添加环境';
                Vue.resetForm(_this.form);
                _this.formVisible = true;
                _this.getUptoken();

            },
            getUptoken() {
                let _this = this;
                axios.get('api/qiniu/token').then(response => {
                    let { status, data, message } = response.data;
                    _this.upLoadData.token= data.uptoken;
                });
            },
            handleAvatarSuccess(res, file) {
                //上传成功后在图片框显示图片
                this.imageUrl ='http://orrs4ojbz.bkt.clouddn.com/'+ res.key;
                this.form.environments_image=res.key;
            },
            submit(formName) {
                let _this = this;
                _this.$refs[formName].validate((valid) => {
                    if (valid) {
                        axios.post('/backend/environment/create', { 'data': _this.form }).then(response => {
                            let {status, data, message} = response.data;
                            if (!status) {
                                _this.$message.error(message);
                                return false;
                            }
                            _this.$message.success(message);
                            _this.formVisible = false;
                            this.form.environments_image='';
                            this.getList();
                        });
                    }
                });
            },
            close(){
                let _this = this;
                _this.formVisible = false;
                this.form.environments_image='';
            },
            trashed(id){
                    this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        axios.post('/backend/environment/destroy', { 'data': id }).then(response => {
                            let {status, data, message} = response.data;
                            if (!status) {
                                _this.$message.error(message);
                                return false;
                            }
                            this.getList();
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                        });
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消删除'
                        });
                    });
            },
        }
    }
</script>